<template>
	<el-card shadow="0" >
		
		<!-- 查询条件-->
		<el-row :gutter="10">
			<el-col :span="6">
				<el-input placeholder="请输入角色名" v-model="queryInfo.name"></el-input>
			</el-col>
			<el-col :span="6">
				<el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
			</el-col>
		</el-row>
		<div style="margin-top: 5px;">
			<el-col >
				<el-button  @click="openAddDialog()"
					type="primary" icon="el-icon-plus">新增</el-button>
			</el-col>
		</div>
		<el-table :data="tableData" style="width: 100% background-color: hsla(120, 60%, 70%, 0.3);" >
			
			<el-table-column align="center" prop="name" label="角色" width="180"></el-table-column>
			<el-table-column align="center" prop="infor" label="介绍"></el-table-column>
			<el-table-column align="center" prop="admin.account" label="创建人"></el-table-column>
			<el-table-column align="center" label="功能菜单" >
				<template slot-scope="scope">
					<span slot="reference" class="name-wrapper" >
						<el-tag size="medium"  style="margin-left: 10px; margin-top:5px" v-for="(menu,index) in scope.row.menus" :key="index">{{menu.name}}</el-tag>
					</span>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="addTime"  :formatter="formatterTime" label="操作时间"></el-table-column>
			<el-table-column align="center" label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="openUpdateDialog(scope.row.id)">编辑</el-button>
					<el-button size="mini" type="danger" @click="deleteRole(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="queryInfo.pageNum"
		      :page-sizes="[4, 6, 8, 10]"
		      :page-size="2"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		</div>
		<AddRole ref="AddRole"></AddRole>
		<UpdateRole ref="UpdateRole"></UpdateRole>
	</el-card>
</template>

<script>
	import AddRole from './AddRole.vue';
	import UpdateRole from './UpdateRole.vue';
	export default{
		components:{
			AddRole,
			UpdateRole,
		},
		data() {
		  return {
		    tableData: [],
			total:0,
			queryInfo:{
				pageNum:1,
				pageSize:4,
				name:"",
			}
		  }
		},
		methods: {
			//打开新增对话框
			openAddDialog() {
				//让新增对话框组件显示出来,  在父组件中调用子组件的数据
				this.$refs.AddRole.dialogVisible = true;
			},
			//打开修改组件
			openUpdateDialog(id) {
				this.$refs.UpdateRole.dialogVisible = true;
				this.$refs.UpdateRole.findRoleById(id);
			},
				
			deleteRole(id){
				this.$confirm('您确定要删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.delete("/admin/roleCtl/deleteRole/" + id).then((res)=> {
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						// window.location.reload();
						this.$router.go();
					})
				});
			},
				
			formatterTime(row,column,cellValue,index){
				var date = new Date(cellValue);
				return date.toLocaleString();
				
			},
			handleSizeChange(val) {
				this.queryInfo.pageSize=val;
				this.queryInfo.pageNum=1;
				this.findRoles();
			},
			handleCurrentChange(val) {
				this.queryInfo.pageNum=val;
				this.findRoles();
			},
			search(){
				this.queryInfo.pageNum=1;
				this.findRoles();
			},
			findRoles(){
				//自动向后端加载角色列表数据
				this.$http.post("admin/roleCtl/findRoleList",this.queryInfo).then((resp)=>{
					console.log(resp.data);
					this.tableData = resp.data.data;
					this.total = resp.data.total;
				})
			}
		}, 
		mounted(){
			 this.findRoles();
		 }
	}
</script>

<style>
	 .el-table .warning-row {
	    background: oldlace;
	  }
	
	  .el-table .success-row {
	    background: #f0f9eb;
	  }
</style>
